<template>
  <div class="adminindex">
    <!--<div v-title data-title="哈哈哈 | 个人中心 "></div>-->
    <!--个人中心-->
    <div class="min">
      <el-container style="min-height: 700px; border: 1px solid #eee">
        <el-aside class="aside">
          <el-menu router :default-active="activePath" class="el-menu-vertical-demo" :collapse="isCollapse">
            <el-menu-item index="/admin">
              <i class="el-icon-user-solid"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <el-menu-item index="/admin/myself">
              <i class="el-icon-user-solid"></i>
              <span slot="title">账户管理</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>内容管理</span>
              </template>
              <el-menu-item index="/admin/helplist">问答</el-menu-item>
              <el-menu-item index="/admin/activitylist" :disabled="userinfo.realstate !==3">活动</el-menu-item>
              <el-menu-item index="/admin/oldstufflist" :disabled="userinfo.realstate !==3">二手</el-menu-item>
              <el-menu-item index="/admin/company" :disabled="userinfo.companystate !==3">招聘</el-menu-item>
              <el-menu-item index="/admin/newslist" :disabled="userinfo.realstate !==3">文章/新闻</el-menu-item>
            </el-submenu>
            <el-menu-item index="/admin/notice">
              <i class="el-icon-bell"></i>
              <span slot="title">通知中心</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'adminindex',
  data () {
    return {
      tableData: [],
      // 被激活的链接地址
      activePath: '/',
      isCollapse: false
    }
  },
  updated () {
    if (this.$route.name === 'adminhome') {
      this.activePath = '/admin'
    } else if (this.$route.name.includes('help')) {
      this.activePath = '/admin/helplist'
    } else if (this.$route.name.includes('activity')) {
      this.activePath = '/admin/activitylist'
    } else if (this.$route.name.includes('oldstuff')) {
      this.activePath = '/admin/oldstufflist'
    } else if (this.$route.name.includes('news')) {
      this.activePath = '/admin/newslist'
    } else {
      this.activePath = '/admin/company'
    }
  },
  computed: {
    ...mapState({
      userinfo: state => state.user.userinfo
    })
  },
  methods: {
    getWidth () {
      if (document.documentElement.clientWidth < '767') {
        this.isCollapse = true
      } else this.isCollapse = false
    }
  },
  created () {
    if (this.$route.name === 'adminhome') {
      this.activePath = '/admin'
    } else {
      this.activePath = '/admin/' + this.$route.name
    }
    window.addEventListener('resize', this.getWidth)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.getWidth)
  }
}
</script>

<style scoped>
  .min {
    width: 80%;
    min-height: 500px;
    margin-left: 10%;
    overflow: hidden;
  }
  .aside{
    width: 200px !important;
    background-color: #fff;
  }
  @media (max-width: 767px) {
    .min {
      width: 100%;
      min-height: 500px;
      margin: 0;
    }
    .aside{
      width: 65px !important;
      background-color: #fff;
    }
  }
</style>
